<template>
  <nw-PageTitle :title="$t('system.userManage')" isBack />
  <nw-PageContainer>
    <scroll-view class="user-container" scroll-y>
      <view class="lists">
        <view class="list">
          <view class="list-top">
            <view class="lt-text">当前用户</view>
          </view>
          <view class="list-content">
            <view class="lc-left">
              <image
                :src="getViteImageUrl('system/avatar.png')"
                mode="aspectFit"
                class="img"
              />
            </view>
            <view class="lc-right">
              <view class="lc-item">{{ userInfo.nickName }}</view>
              <view class="lc-item">角色：厨师</view>
            </view>
          </view>
        </view>

        <view v-if="userList.length" class="list">
          <view class="list-head">
            <view class="lt-text">用户角色修改与删除</view>
          </view>
          <view class="nw-table">
            <view class="tr">
              <view class="th">用户</view>
              <view class="th">角色</view>
              <view class="th" style="flex: 0.6"></view>
            </view>
            <view class="tbody">
              <view class="tr" v-for="(row, i) in userList" :key="row">
                <view class="td">{{ row.name }}</view>
                <view class="td">
                  <view class="uss-form-select">
                    <nw-PickerSelect
                      v-model="row.roleIds"
                      :columns="actionSheetColumns"
                      :text="row.roleName"
                      @confirm="handleActionSelectConfirm($event, i)"
                    />
                  </view>
                </view>
                <view class="td" style="flex: 0.6">
                  <nw-Button text="删除" @click="handleDeleteUser(row)" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="btn-wrap">
        <nw-Button text="添加用户" @click="handleAddUser"></nw-Button>
        <nw-Button text="退出账号" @click="handleExitAccount"></nw-Button>
      </view>
    </scroll-view>

    <up-toast ref="uToastRef" />
    <AddUser
      v-if="addUserVisible"
      v-model="addUserVisible"
      @update="getDataList"
    />
    <ConfirmTip
      v-if="confirmTipVisible"
      v-model="confirmTipVisible"
      :type="confirmTipType"
      @close="handleConfirmTipClose"
      @update="handleConfirmTipUpdate"
    />
    <ExitAccountTip
      v-if="exitAccountTipVisible"
      v-model="exitAccountTipVisible"
    />
  </nw-PageContainer>
</template>

<script setup>
import AddUser from './component/AddUser.vue'
import ConfirmTip from './component/ConfirmTip.vue'
import ExitAccountTip from './component/ExitAccountTip.vue'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { bindDeviceList } = storeToRefs(useDeviceStore())
const formData = ref({
  name: '',
  picturePath: '',
  roleIds: ''
})
const actionSheetColumns = ref([
  [
    { value: 0, label: '篮球' },
    { value: 1, label: '足球' },
    { value: 2, label: '游泳' }
  ]
])
const userList = ref([
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['1'],
    roleName: '',
    oldRoleIds: '1'
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['1'],
    roleName: '',
    oldRoleIds: '1'
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['1'],
    roleName: '',
    oldRoleIds: '1'
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  },
  {
    name: '王云飞',
    roleIds: ['2'],
    roleName: '',
    oldRoleIds: '2'
  },
  {
    name: '王云飞',
    roleIds: [''],
    roleName: '',
    oldRoleIds: ''
  }
])
// 弹框参数
const uToastRef = ref(null)
const addUserVisible = ref(false)
const confirmTipVisible = ref(false)
const confirmTipType = ref('')
const confirmTipIndex = ref('')
const exitAccountTipVisible = ref(false)

onMounted(_ => {
  // getDataList()
})

function getDataList() {
  // g_api.user.apiGetPrincipal().then(({ code, data }) => {
  //   if (code === 200 && data) {
  //     tableList.value = data
  //   }
  // })
}

const handleActionSelectConfirm = (e, i) => {
  console.log('handleActionSelectConfirm', e, i)
  const data = e.value.filter(i => i)
  const checkedNode = data[data.length - 1]
  userList.value[i].roleName = checkedNode?.label || ''
}

const handleDeleteUser = row => {
  console.log('handleDeleteUser', row)
  confirmTipVisible.value = true
  confirmTipType.value = '1'
}

const handleAddUser = _ => {
  console.log('handleAddUser')
  addUserVisible.value = true
}

const handleExitAccount = _ => {
  console.log('handleExitAccount')
  const { Cooking, Pause, WaitPlating, InPlating, AutoWashPot, ManualWashPot } =
    g_i.device.DeviceStatus
  const found = bindDeviceList.value.find(item =>
    [
      Cooking,
      Pause,
      WaitPlating,
      InPlating,
      AutoWashPot,
      ManualWashPot
    ].includes(item.status * 1)
  )
  // if (found) {
  //   exitAccountTipVisible.value = true
  //   return
  // }
  userStore.setLogOut()
  // g_api.user.apiGetPrincipal().then(({ code, data }) => {
  //   if (code === 200 && data) {
  //     tableList.value = data
  //   }
  // })
}

const handleConfirmTipClose = _ => {
  console.log('handleConfirmTipClose')
  if (confirmTipType.value === '0') {
    const find = userList.value[confirmTipIndex.value]
    find.roleIds = find.oldRoleIds
    userList.value = JSON.parse(JSON.stringify(userList.value))
  }
}
const handleConfirmTipUpdate = _ => {
  console.log('handleConfirmTipUpdate')
  if (confirmTipType.value === '0') {
    const find = userList.value[confirmTipIndex.value]
    find.oldRoleIds = find.roleIds
    userList.value = JSON.parse(JSON.stringify(userList.value))
  }
  uToastRef.value.show({
    type: 'success',
    message: confirmTipType.value === '0' ? '修改成功' : '删除成功'
  })
}
</script>

<style lang="scss" scoped>
.user-container {
  // height: calc(100%);
  padding: 0 20rpx 93 * 2+20rpx;
  box-sizing: border-box;
}

.lists {
  box-sizing: border-box;
  .list {
    .list-top {
      padding: 16rpx 0;
    }
    .list-head {
      padding: 20rpx 0;
    }
    .list-top,
    .list-head {
      .lt-text {
        padding-left: 24rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: var(--color-333);
      }
    }
  }
}
.list-content {
  display: flex;
  align-items: center;
  padding: 0 26rpx;
  background-color: var(--bg-color);
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
  border-radius: 18rpx;
  .lc-left {
    .img {
      display: block;
      width: 94rpx;
      height: 94rpx;
      border-radius: 50%;
    }
  }
  .lc-right {
    flex: 1;
    margin-left: 40rpx;
    .lc-item {
      height: 60rpx;
      display: flex;
      align-items: center;
      color: var(--color-333);
      &:nth-child(1) {
        font-weight: 600;
        font-size: 26rpx;
      }
      &:nth-child(2) {
        font-weight: 400;
        font-size: 22rpx;
        border-top: 1rpx solid var(--border-color);
      }
    }
  }
}

.nw-table {
  padding: 26rpx 20rpx;
  .uss-form-select {
    width: 108rpx;
    margin: 0 auto;
  }
  .td {
    padding-top: 14rpx;
    padding-bottom: 14rpx;
  }
  :deep(.nw-button) {
    width: 78rpx;
    height: 34rpx;
    border-radius: 4rpx;
    background-color: transparent !important;
    .u-button__text {
      line-height: 18rpx;
      font-size: 18rpx !important;
      font-weight: 400;
      color: var(--main-theme) !important;
    }
    &:not(.u-button--disabled) .u-button__text {
      color: var(--color-fff);
    }
  }
}

.btn-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 48rpx 40rpx;
  box-sizing: border-box;
  .nw-button-wrap {
    width: 100%;
    + .nw-button-wrap {
      margin-top: 24rpx;
    }
  }
  :deep(.nw-button) {
    height: 54rpx;
    border-radius: 28rpx;
    background-color: #fff !important;
    border-color: #33bd88;
    .u-button__text {
      // line-height: 24rpx;
      font-size: 24rpx !important;
      color: var(--main-theme) !important;
    }
  }
}
</style>
